<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <span class="title">时间:</span>
        <el-select v-model="selectedDays" class="m-2" placeholder="选择统计天数" @change="fetchData">
          <el-option
            v-for="item in dayOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <span class="title">部门:</span>
        <el-select v-model="selectedDept" class="m-2" placeholder="选择部门" @change="fetchData">
          <el-option
            v-for="item in deptOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />

        </el-select>
      </template>
      <div ref="chartRef" class="chart-container"></div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import { getHistoryChatCount } from '@/api/chat'

const chartRef = ref(null)
let chart = null

const selectedDays = ref(7)
const selectedDept = ref(0)
const deptOptions = ref([
  { value:0 , label: '全部' },
  { value: 100, label: '学生' },
  { value: 207, label: '教师' },
  { value: 203, label: '导师' }
])
const dayOptions = [
  { value: 3, label: '最近3天' },
  { value: 7, label: '最近7天' },
  { value: 15, label: '最近15天' },
  { value: 30, label: '最近30天' },
]

const initChart = () => {
  if (chart) {
    chart.dispose()
  }
  chart = echarts.init(chartRef.value)
}

const fetchData = async () => {
  try {
    const res = await getHistoryChatCount(selectedDays.value, selectedDept.value)
    if (res.code === 200) {
      const dates = res.data.map(item => item.date)
      const counts = res.data.map(item => item.count)
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dates
        },
        yAxis: {
          type: 'value',
          name: '日活量数据'
        },
        series: [
          {
            name: '日活量统计',
            type: 'line',
            smooth: true,
            data: counts,
            itemStyle: {
              color: '#409EFF'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(64,158,255,0.3)'
                },
                {
                  offset: 1,
                  color: 'rgba(64,158,255,0.1)'
                }
              ])
            }
          }
        ]
      }
      
      chart.setOption(option)
    }
  } catch (error) {
    console.error('获取数据失败:', error)
  }
}

const handleResize = () => {
  chart && chart.resize()
}

onMounted(() => {
  initChart()
  fetchData()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  if (chart) {
    chart.dispose()
    chart = null
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.app-container {
  padding: 20px;
  height: 100%;
}

.box-card {
  height: calc(100vh - 140px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 16px;
  font-weight: bold;
}

.chart-container {
  width: 100%;
  height: calc(100% - 20px);
  min-height: 400px;
}

.m-2 {
  width: 200px;
  margin-left: auto;
}
</style>